import React, { useEffect, useRef, useState } from 'react'
import { ArrowLeft, OrdersO } from '@react-vant/icons';
import './week.css'
import { useNavigate } from 'react-router-dom';
import * as echarts from 'echarts';
import { Popover, Space, Toast, Button } from 'react-vant';

export default function Week() {
  const Navigate=useNavigate()
  const chartRef = useRef(null);

  const bar = () => {
    var myChart = echarts.init(chartRef.current);
    var option = {
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: {
          color: 'white',
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: 'white',
        }
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
          itemStyle: {
            color: '#fff',
          }
        }
      ],
      textStyle: {
        color: 'white' // 全局字体颜色设置为白色，影响图例等
      }
    };
    
    option && myChart.setOption(option);
  }
  

  useEffect(()=>{
    bar()
  },[])
  return (
    <div>
      <div className='week-head'>
        <span className='week-head-bor'><ArrowLeft onClick={()=>{Navigate('/steps')}} /></span>
        <span>运动时间</span>
        <span></span>
      </div>
      <div ref={chartRef} className='week-bar'></div>
      <div className='week-content'>
        <div className='week-content-bor'>
            <div className='week-con'>
                <p style={{color:"#797979"}}>周步数</p>
                <p>0/1000</p>
                <p style={{color:"#797979"}}>距离</p>
                <p>0 km</p>
                <p style={{color:"#797979"}}>卡路里</p>
                <p>0 kcal</p>
            </div>
            
            <button className='week-but'>编辑目标</button>
        </div>
        
      </div>
    </div>
  )
}
